<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>

    <script src="../js/vue.js">

    </script>
</head>
<body>

<div id="root">
    <h1>姓名:{{info.name}}</h1>
    <h1 v-if="info.gender">性别:{{info.gender}}</h1>
    <h1>年龄:{{info.age}}</h1>
    <button @click="addSex">添加性别</button>


</div>

<script type="text/javascript">
    /**
     *     1.vue会监视data中所有层次的数据
     *     2.如何监测对象中的数据?
     *       1) 通过Vue.set(target,key,value) 可以向响应式对象中添加一个属性 并将其更新到视图中
     *       2) 通过vm.$set(object,key,value) 可以向响应式对象中添加一个属性 并将其更新到视图中
     *       3) 通过vm.$delete(object,key) 可以删除对象中的属性
     *       4) 注意:Vue.set和vm.$set 不能给vm 或 vm的根数据对象添加属性
     *     3.如何监测数组中的数据?
     *       通过包裹数组的方法来实现数组中的数据的监测
     *         以下数组的方法可以实现数组中的数据的监测
     *         push(data...)
     *         pop(data...)
     *         shift(data...)
     *         unshift(data...)
     *         splice(index,howmany,data...)
     *         sort()
     *         reverse()
     *
     * @type {boolean}
     */
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            info: {
                name: 'xxx',
                age: 0,
            }
        },
        methods: {
            addSex: function () {
                // this.$set(this.info,'gender','男')
                // 此方法可以添加属性 但是不能修改属性的值
                //注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。
                Vue.set(this.info, 'gender', '男')
            }
        },

    });

</script>
</body>

</html>